<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 
        面试题:react,vue中的Key有什么作用?(key的内部原理)
            1.虚拟dom中key的作用:
                key是虚拟dom对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟dom】
                随后Vue进行【新虚拟dom】与【旧虚拟dom】的差异比较,比较规则如下

            2.对比规则
                (1).旧虚拟dom中找到了与新虚拟dom相同的key
                    1.若虚拟dom中内容没变,直接使用之前的真是dom
                    2.若虚拟dom内容变了,则生成新的真实dom,随后替换掉页面中之前的真实dom
                (2).旧虚拟dom中未找到与新虚拟dom相同的key
                    创建新的真实dom,随后渲染到页面

            3.用index作为key可能会引发的问题:
                1.若对数据进行:逆序添加,逆序删除等破坏顺序操作
                    会产生没有必要的真实dom更新=>界面效果没问题,但效率低
                2.如果结构中还包含输入类的dom
                    会产生错误的dom更新=>界面有问题

           4.开发中如何选择key?
                1.最好使用每条数据的唯一标识作为Key，比如id.手机号,身份证号,学号等唯一值。
                2.如果不存在对数据进行逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示,
                    使用index作为Key时没有问题的

     -->
    <div id="root">
        <h2>人员列表</h2>
        <button @click.once="add">添加一个对象</button>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(p, index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>

    </div>

    <script>

        new Vue({
            el: '#root',
            data: {
                persons: [
                    {
                        id: '1',
                        name: '张三1',
                        age: 19
                    },
                    {
                        id: '2',
                        name: '张三2',
                        age: 191
                    },
                    {
                        id: '3',
                        name: '张三3',
                        age: 193
                    }
                ],
            },
            methods: {
                add () {
                    const p = {
                        id: '004',
                        name: '老刘',
                        age: 40
                    }
                    this.persons.unshift(p)
                }
            }
        })

    </script>

</body>
</html>